<!-- <template>
	<view>
		<view class="noneVehicles">
			<view>
				<image src="/static/logo.png" mode="出错了" style="width: 150rpx; height: 150rpx;"></image>
			</view>
			<text style="font-size: 25rpx; font-weight: bold; margin-top: 10rpx;">
				暂无车辆信息
			</text>
		</view>


		<button class="button" @tap="toAdd">添加爱车</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 定义一个车辆对象
	let vehicle = ref({
		imageUrl: "/static/success.png",
		type: "奔驰",
		model: "GR"
	});
	// 定义一个车辆列表数组
	let vehicleList = ref([]);
	function toAdd() {
		uni.navigateTo({
			url: "/pages/addVehicle/addVehicle"
		})
	}
</script>

<style scoped>
	/* 为 .noneVehicles 类添加样式 */
	.noneVehicles {
		/* 使用 flex 布局 */
		display: flex;
		/* 主轴上的项目居中对齐 */
		/* justify-content: center; */
		/* 交叉轴上的项目居中对齐 */
		align-items: center;
		/* 让子元素垂直排列 */
		flex-direction: column;
		/* 设置高度，确保垂直居中生效，这里假设为 100vh 表示整个视口高度 */
		/* height: 100vh; */

		/* 设置距顶的高度 */
		padding-top: 20vh;

	}

	.button {
		background-color: #1D6FFF;
		width: 60vw;
		color: aliceblue;
		border-radius: 20px;

		position: absolute;
		bottom: 20vw;
		right: 20vw;

		/* 降低按钮高度 */
		height: 40px;

		/* 使用 flex 布局让文字上下左右居中 */
		display: flex;
		justify-content: center;
		align-items: center;

		/* 去除默认边框和内边距 */
		border: none;
		padding: 0;
	}
</style> -->
<template>
	<view>
		<!-- 判断是否有车辆信息 -->
		<view v-if="vehicleList.length > 0">
				<!-- 显示车辆信息 -->
				<view class="vehicle-item" v-for="(vehicle, index) in vehicleList" :key="index">
					<!-- 车辆图片 -->
					<image :src="vehicle.imageUrl" class="vehicle-image" mode="aspectFit" />
					<!-- 车辆信息 -->
					<view class="vehicle-info">
						<view class="vehicle-type">车型：{{ vehicle.type }} - {{ vehicle.model }}</view>
						<view class="vehicle-number">车牌：{{ vehicle.number }}</view>
						<!-- 单选框 -->
						<radio :checked="number == vehicle.number" @tap="setDefault(index)" style="padding-top: 10rpx;">设为默认</radio>
					</view>
					<!-- 操作按钮 -->
					<view class="vehicle-actions">
						<view class="action-button delete-button" @tap="deleteVehicle(index)" style="font-size: 18px;">删除</view>
					</view>
				</view>
		</view>

		<!-- 如果没有车辆信息 -->
		<view v-else class="noneVehicles">
			<image src="/static/logo.png" mode="aspectFit" style="width: 200rpx; height: 200rpx;"></image>
			<text style="font-size: 30rpx; font-weight: bold; margin-top: 10rpx;">
				暂无车辆信息
			</text>
		</view>

		<!-- 添加爱车按钮 -->
		<button class="add-button" @tap="toAdd">添加爱车</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 默认车辆的车牌号
	let number = ref("");
	// 定义车辆列表数据
	let vehicleList = ref([{
			imageUrl: "/static/success.png", // 车辆图片
			type: "奔驰",
			model: "GR",
			number: "豫M34523"
		},
		{
			imageUrl: "/static/success.png", // 车辆图片
			type: "奔驰",
			model: "GR",
			number: "豫M34524"
		}
	]);

	// 设为默认车辆
	const setDefault = (index) => {
		if(number.value == vehicleList.value[index].number) {
			number.value = "";
			return;
		}
		number.value = vehicleList.value[index].number;
		uni.showToast({
			title: "已设为默认车辆",
			icon: "none"
		});
	};
	

	// 删除车辆
	const deleteVehicle = (index) => {
		vehicleList.value.splice(index, 1);
		uni.showToast({
			title: "删除成功",
			icon: "none"
		});
	};

	// 跳转到添加车辆页面
	const toAdd = () => {
		uni.navigateTo({
			url: "/pages/vehicle/addVehicle/addVehicle"
		});
	};
	
	// 初始化默认车辆
	onMounted(() => {
		if (vehicleList.value.length > 0) {
			number.value = vehicleList.value[0].number;
		}
	});
</script>

<style scoped>
	/* 车辆信息条目样式 */
	.vehicle-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 车辆图片样式 */
	.vehicle-image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	/* 车辆信息样式 */
	.vehicle-info {
		flex: 1;
	}

	.vehicle-type {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.vehicle-number {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-top: 10rpx;
	}

	/* 操作按钮样式 */
	.vehicle-actions {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.action-button {
		/* background-color: #1D6FFF; */
		color: #ff4d4d;
		font-size: 24rpx;
		font-weight: bold;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		width: 120rpx;
		text-align: center;
	}

	.delete-button {
		/* background-color: #ff4d4d; */
	}

	/* 添加爱车按钮样式 */
	.add-button {
		background-color: #1D6FFF;
		width: 90%;
		color: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
		position: fixed;
		bottom: 40rpx;
		left: 5%;
	}

	/* 暂无车辆信息样式 */
	.noneVehicles {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}
</style>